<template>
    <div class="userInfo">
        <pageContainer ref="container">
            <template #button>
                <el-button type="primary" plain @click="add" class="btn">新增</el-button>
                <el-button type="danger" plain @click="del()" class="btn">批量删除</el-button>
            </template>
            <template #table>
                <el-table
                  ref="multipleTableRef"
                  :data="tableData"
                  row-key="id"
                  empty-text="没有数据"
                  style="width: 100%"
                  @selection-change="selectChange"
                >
                  <el-table-column type="selection" width="30" />
                  <el-table-column prop="username" label="用户名" width="110" />
                  <el-table-column prop="phone" label="手机号" width="120" />
                  <el-table-column prop="avatar" label="头像" width="110" >
                    <template #default="scope">
                        <div style="width: 40px; height: 40px; border-radius: 4px; overflow: hidden; flex-shrink: 0;" @click="previewImg(scope.row.img, 0)">
                          <el-image src="scope.row.img[0]" fit="cover" style="width: 100%; height: 100%;" />
                        </div>
                    </template>
                  </el-table-column>

                  <el-table-column prop="role" label="角色" width="110" />
                  <el-table-column prop="overtime" label="禁约截止时间" width="110" >
                    <template #default="scope">
                      {{ scope.row.overtime || '-' }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="createtime" label="账号创建时间" width="110" />
                  <el-table-column  label="操作" width="110">
                        <template #default="scope">
                            <el-button color="#626aef" :icon="Edit" circle plain @click="edit(scope.row,scope.$index)"></el-button>
                            <el-button type="danger" :icon="Delete" circle plain @click="del(scope.row,scope.$index)"></el-button>
                        </template>
                  </el-table-column>
                </el-table>
            </template>
        </pageContainer>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import pageContainer from '@/components/page-container/page-container.vue';

import {
  Delete,Edit
} from '@element-plus/icons-vue'

const container=ref()

defineProps({
    tableData:{
        type:Array,
        default:[]
    }
})

// 删除球场信息
const del=()=>{
    container.value.open()
}
</script>

<style lang='scss' scoped>
.userInfo{
    .btn{
        height: 24px;
        font-size: 13px;
    }
}
</style>